<template>
  <div id="app">
    <div class="app">
      <!-- 传入方法挂载方法当点击执行的时候获取添加数据讲数据加入数据源 -->
      <AddTodo :add="receive" />
      <!-- 传入数据,改变选中状态的方法删除的方法 当点击时调用 -->
      <TodoList
        :todolist="dotos"
        :changeTodo="changeChecked"
        :delTodo="deleteDoto"
      />
      <!-- 底部事件   传入全选反选事件 数据, 删除多个方法 -->
      <TodoFooter
        :checkAll="checkAll"
        :todoFooter="dotos"
        :delAll="deleteAll"
        :todos="dotos"
      ></TodoFooter>
      <button @click="one">第一种调用父组件调用子组件的方法</button>
      <button @click="two">第二种调用父组件调用子组件的方法</button>
      <!-- 通过ref调用子组件方法 组件上必须使用ref绑定调用的名字 -->
      <!-- 通过$emit $on调用子组件方法 父组件中 this.$refs.child.$emit("childmethods", 10);  childmethods为子组件方法名字-->
      <!-- $on需要写在mounted中 因为需要子组件在初始化是就有一个方法 -->
      <!-- // 通过$emit调用父组件函数 父组件中使用子组件时需要使用@绑定方法 -->
      <EmitOnRef ref="child" @fatherMethod1="fatherMethod1"></EmitOnRef>
    </div>
  </div>
</template>

<script>
// 引入组件
import AddTodo from "./components/AddTodo.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";
import EmitOnRef from "./components/EmitOnRef.vue";
export default {
  name: "App",
  data() {
    return {
      dotos: [
        { id: 1, content: "吃饭", isdone: true },
        { id: 2, content: "睡觉", isdone: false },
        { id: 3, content: "打豆豆", isdone: false },
        { id: 4, content: "吃饭", isdone: true },
      ],
    };
  },
  components: {
    AddTodo,
    TodoList,
    TodoFooter,
    EmitOnRef,
  },
  methods: {
    one() {
      this.$refs.child.getOne();
    },
    two() {
      this.$refs.child.$emit("childmethods", 10);
    },
    fatherMethod(parma) {
      console.log("通过$parent调用父组件方法参数为" + parma);
    },
    fatherMethod1(parma) {
      console.log(222222222222222);
      console.log("通过$emit调用父组件方法参数为" + parma);
    },
    // 添加数据
    receive(todo) {
      this.dotos.unshift(todo);
    },
    // 改变选中状态
    changeChecked(id) {
      console.log(id);
      this.dotos.forEach((item) => {
        if (id === item.id) {
          item.isdone = !item.isdone;
          console.log(item.isdone);
        }
      });
    },
    // 删除按钮
    deleteDoto(id) {
      this.dotos = this.dotos.filter((item) => {
        // 过滤出来不符合条件的 从新渲染到页面上
        if (id !== item.id) {
          return item;
        }
      });
    },
    // 全选和取消全选
    checkAll(isCheck) {
      // 父组件 将所有的todo中 isdone 的状态全部改为 isCheck
      this.dotos.forEach((item) => (item.isdone = isCheck));
      // this.dotos.map((item) => {
      //   item.isdone = isCheck;
      // });
    },
    // 清除已完成内容
    deleteAll() {
      //  把isdone 状态是 true的删除掉
      this.dotos = this.dotos.filter((item) => {
        // false
        if (!item.isdone) {
          return item;
        }
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>